<template>
    <div class="posf ft-option bo-bg" v-bind:class="[getClass]">
        <div v-for="(item, i) in list" class="hover" v-bind:style="{fontFamily: item.value, fontSize: '18px'}" v-text="item.name" v-bind:class="{active: index === i}" v-on:click="change(i)"></div>
    </div>
</template>

<script>
  import {Observer} from '../../core/util'
  // 字体列表下拉框组件
  export default {
    created: function () {
        var self = this,
            editor;
        Observer.register('hidecloth', function () {
            self.show = false;
        });
        Observer.register('showfontfamilylist', function () {
            self.show = true;
            Observer.fire('getcurfontfamily', function (i, item) {
                self.index = i;
            });
            Observer.fire('showcloth');
        });
        Observer.register('getcurfontfamily', function (callback) {
            var value = editor.queryCommandValue('fontfamily');
            for (var i = 0, len = self.list.length; i < len; i++) {
                if (self.list[i].value.replace(/\s/g, '').indexOf(value.replace(/\s/g, '').replace(/"/g, '')) > -1) break;
            }
            i === len ? callback(-1, {name: ''}) : callback(i, self.list[i]);
        });
        function editorCompleted(e) {
            Observer.remove('editorCompleted', editorCompleted);
            editor = e;
        }
        Observer.register('editorCompleted', editorCompleted);
    },
    data: function(){
        return {
            show: false,
            index: -1,
            list: [{
                name: $.i18n('toolbar_font_family_SimSun'),
                value: "宋体, SimSun"
            }, {
                name: $.i18n('toolbar_font_family_YaHei'),
                value: "微软雅黑, Microsoft YaHei"
            }, {
                name: $.i18n('toolbar_font_family_SimKai'),
                value: "楷体, 楷体_GB2312, SimKai"
            }, {
                name: $.i18n('toolbar_font_family_SimHei'),
                value: "黑体, SimHei"
            }, {
                name: $.i18n('toolbar_font_family_SimLi'),
                value: "隶书, SimLi"
            }, {
                name: "andaleMono",
                value: "andale mono"
            }, {
                name: "arial",
                value: "arial, helvetica, sans-serif"
            }, {
                name: "arialBlack",
                value: "arial black, avant garde"
            }, {
                name: "comicSansMs",
                value: "comic sans ms"
            }, {
                name: "impact",
                value: "impact, chicago"
            }, {
                name: "timesNewRoman",
                value: "times new roman"
            }]
        }
    },
    computed: {
        getClass: function () {
            return this.show ? '' : 'hide';
        }
    },
    methods: {
        change: function (i) {
            this.show = false;
            Observer.fire('execCommand', ['fontfamily', this.list[i].value]);
            Observer.fire('hidecloth');
        }
    }
  }
</script>